<template>
    <RadioGroup class="department-radio-group" v-model="value" @on-change='handleChange' style="width: 100%;">
        <Tree class="department-radio" :render="renderContent" :data="list" ></Tree>
    </RadioGroup>
</template>
<script>
  import{ Icon, Radio } from 'view-design'
  export default {
    data() {
      return {
        list: [
            {title: '轿车轮胎销售部', type: 'dpt', expand: true, id: 12, children: [
                {title: '华东科', expand: false, id: 24, children: [{title: '上海', id: 143},{title: '台州温州', id: 124}]},
                {title: '北方科室', expand: false, id: 25, children: [{title: '渠道', id: 144},{title: '开放', id: 125}]}
            ]},
        ],
        curNode: {}
      }
    },
    props: {
        value: String
    },
    created() {
        this.getData()
    },
    methods: {
        getData () {
            this.$jsonPost('/department/listDepartmentTree').then(res => {
                const loop = (res) => {
                res.forEach(item => {
                    item.expand = false
                    if (item.children && item.children.length) {
                        loop(item.children)
                    }
                })
                }
                loop(res)
                this.list = res
            })
        },
        renderContent (h, { root, node, data }) {
            return(
                <div
                    onClick={() => { this.changeExpand(data) }}
                    class='tree-item ivu-tree-gather'>
                    <span class='left-info'>
                        <span class={['ivu-tree-title']}>
                            {data.level<2 ? <span><Icon type="ios-folder" />{data.name}</span> : <Radio  label={data.id} >{data.name}</Radio> }
                        </span>
                    </span>
                </div>
            ) 
        },
        changeExpand(data) {
            this.curNode = data
            data.expand = !data.expand;
        },
        handleChange(value) {
            this.$emit('input', value, this.curNode)
        },
    },
  }
</script>
